<template>
    <div class="content-box">
        <div class="content-box-name">{{name}}</div>
        <div class="content-box-desc">{{desc}}</div>
        
        
        <div>详细介绍</div>
        <div v-html="introMd"></div>
         
        
    </div>
</template>
<script>
    
    var API;
    

    export default {
        data(){
            return {
                name:'readme',
                desc:'一边写组件，一边撸文档，左青龙，右白虎。',
                intro:'%23%23%23%20src%E4%B8%8B%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84%EF%BC%9A%0D%0A1.%20%60assets%60%20scss%E8%B5%84%E6%BA%90%0D%0A2.%20%60components%60%20%E7%BB%84%E4%BB%B6%E5%BA%93%0D%0A',
                edata:[],
                API:API
            }
        },
        computed:{
          API_props(){
            return marked(this.API.props.join('\n'))
          },
          API_events(){
            return marked(this.API.events.join('\n'))
          },
          API_slots(){
            return marked(this.API.slots.join('\n'))
          },
          API_options(){
            return marked(this.API.options.join('\n'))
          },
          API_rules(){
            return marked(this.API.rules.join('\n'))
          },
          introMd(){
             return this.intro?marked(decodeURIComponent(this.intro)):''
          }
        },
        components:{
            
        }
    }
</script>
<style>
.content-box{
    padding: 20px 25px;
  }
.content-box-name{
    font-size: 26px;
    font-weight: 400;
    margin: 12px 0; 
  }
.content-box-desc{
  margin: 10px;
    font-size: 14px;
}
.tab-title{
  font-size:20px;
  font-weight: 400;
   margin: 8px 0; 
}
.tab-desc{
  font-size:16px;
  padding-bottom: 10px;
}
</style>
